<template>
  <el-card
    :header="title"
    shadow="never"
  >
    <el-scrollbar
      :style="scrollbarStyle"
      class="scroll-container"
    >
      <el-form-package
        ref="ref-form"
        :c-m="formCM"
        :linkage="formLinkage"
        :reset-to="formResetTo"
        :loading="formLoading"
        @input="handleFormInput($event)"
      />
    </el-scrollbar>
    <tg-control-bar
      v-if="hasControlBar"
      :left-items="controlBarLeftItems"
      :right-items="controlBarRightItems"
    />
  </el-card>
</template>

<script lang="ts">
/*
prop 列表 [参考 TgForm]
ref 列表 [参考 TgForm]
*/
import { Component, Prop } from 'vue-property-decorator'
import TgForm from './TgForm'
import { isNotEmpty } from '@TG/kit/validate'
import { appModule } from '@TG/store/modules/app'
import ElFormPackage from '../ElPackage/ElFormPackage.vue'
import TgControlBar from '../TgControlBar/index.vue'

@Component({
  name: 'TgFormBasic',
  components: {
    ElFormPackage,
    TgControlBar
  }
})
export default class extends TgForm {
  get scrollbarStyle() {
    let maxHeight: number = this.maxHeight
    if (this.maxHeight === -1) {
      maxHeight = appModule.pageSize.height
      maxHeight -= 50 // topbar 50
      maxHeight -= 34 // tagbar 33 + 1
    }
    maxHeight -= 2 // cardborder 2
    if (isNotEmpty(this.title)) {
      maxHeight -= 55 // header 55
    }
    maxHeight -= 40 // bodypadding 40
    maxHeight -= 9 // bodymargin 9
    if (this.hasControlBar) {
      maxHeight -= 58 // controlbar 58
    }
    if (this.holdHeight) {
      return { height: `${maxHeight}px` }
    } else {
      return { 'max-height': `${maxHeight}px` }
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-container {
  margin-bottom: 9px;
  ::v-deep {
    .el-scrollbar__wrap {
      height: 100%;
      overflow-x: hidden;
    }
    .el-scrollbar__view {
      overflow-x: hidden;
    }
  }
}
</style>
